React Navigation v4
Reactのナビゲーションライブラリ
Hooks
v5の場合は↑を別途入れないといけない
useNavigation
navigtion.state.paramではなくgetParamを使おう ref const { name } = this.props.navigation.state.params;ではなく
const name = this.props.navigation.getParam('name', 'Peter');を使う
paramsにnamaeがないときに、Peterを入れてくる
ちがう？paramsがundefinedのときか？
つまりundefindで落ちなくなる
これさ、もし.state.params.name = undefinedだったらどうなるの？
つまりnameプロパティ自体はあるけど中身がundefinedであるとき
↑こうなるのってわざわざsetParams時にそのプロパティにundefined入れたときだけでは？
なので、そんなことしなければそうはならない
code:ts
// この2つは等価なのか？
navigation.getParam('userId') || '0';
navigation.getParam('userId', '0');
// こうする必要がある？
navigation.getParam('userId', '0') || '0';
createMaterialTopTabNavigator
こいつパフォーマンスやばくね？
今見ていないタブのactionも実行される
画面上部のタブを作る
このタブをクリックしたときにページを上にスクロールしたい
twitterとかみたいに
案２ react-navigationのFlatListを使う
スタックに対する扱い
push, pop以外にも、replace, resetなどもある
dismiss
スタックの破棄
NavigationActionsは普通のメソッドと何が違うのか
いつ使うのか
並列ページに対しても作用できる？
console.logでnavigationのスタック状況を確認したい
2回連続でbackしたいときはどうする？
navigation.pop(2)でいけるはず ref navigation.pop(); navigation.pop()と同じ
にならないときもある、pop(2)では無理で、pop;popのときはいけるときがある、なんで #?? replaceはこういうときに使えるものなの？
そう。最初からpop*2することが決まっているならpushするところをreplaceにすればいい
a→b→replace(c)すれば、スタックはa,cになる
FCでnavigation.setOptionsをしたいとき
NavigationScreenComponentでFCの型付をしたらいい
code:tsx
const HogePage: NavigationScreenComponent<{}, {}> = () => (
<></>
);
HogePage.navigationOptions = () => ({
headerTitle: 'Hogeページ'
});
export default HogePage;
できれば親からnavigation受け取らなくてもできるようになると嬉しいんだけどなmrsekut.icon
つまりhooksが欲しい
ていうか関数内にいると邪魔だな、前のほうがいい
v5.1
型の話
以下のようにして型を付けてあげればいい
code:ts
navigation: NavigationScreenProp<{}>;
{}の中にはparamsとかの型を書く？
pramsへの型付け
型の付け方
むずくね？正解がわからん
v5のexampleは良い感じだが、v4はclassコンポーネントが多いので微妙に参考にならない
NavigationInjectedPropsを使う
code:ts
HogePage.navigationOptions = ({
navigation
}: NavigationInjectedProps) => ({
...
})
動向
アニメーション